<template>
<a-table :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="pagination" @change="handleChange">
    <template #expandedRowRender="{record}">
    <p>{{ record.description }}</p>
    </template>
</a-table>
</template>

<script lang="ts">
  import { Table, TableProps } from 'ant-design-vue';
  import { defineComponent, PropType } from 'vue';

  interface MyTableProps extends TableProps {
    dataSource: any[];
    columns: any[];
  }

  export default defineComponent({
  name: 'MyTable',
  extends: Table,
  props: {
    // 自定义 props
    dataSource: {
      type: Array as PropType<MyTableProps['dataSource']>,
      default: () => [],
    },
    columns: {
      type: Array as PropType<MyTableProps['columns']>,
      default: () => [],
    },
    loading: {
      type: Boolean as PropType<MyTableProps['loading']>,
      default: false,
    },
    pagination: {
      type: Object as PropType<MyTableProps['pagination']>,
      default: () => ({
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total: number) => `共 ${total} 条`,
      }),
    },
  },
  methods: {
    // 自定义 methods
    handleChange(pagination: any, filters: any, sorter: any) {
      this.$emit('change', pagination, filters, sorter);
      // todo 获取数据
    },
  },
  });
</script>
  